<template>
    <div class="side-wrapper">
        <div class="dir-name">文件夹: {{ dir_name }}</div>
        <div class="tree-wrapper">
            <el-tree
                :data="root.children"
                :props="defaultProps"
                accordion
                :highlight-current="true"
                :auto-expand-parent="true"
                @node-click="handleNodeClick">
            </el-tree>
        </div>
        <div class="btns">
            <button @click="openDirectory">打开文件夹</button>
            <button @click="loadSample">加载示例</button>
        </div>
    </div>
</template>

<script lang="ts" setup name="Side">
    import { ref, onMounted, reactive } from 'vue';
    import C_SAMPLE from '@/assets/c_sample';
    import EventBus from '@/event_bus';
    import { CPP_CODE_UPDATE } from '@/event_bus/events';

    const root = reactive({
        children: C_SAMPLE
    });
    const dir_name = ref('示例');


    const defaultProps =  {
        children: 'children',
        label: 'name'
    };

    function loadSample() {
        dir_name.value = '示例';
        root.children = C_SAMPLE;
    }

    async function openDirectory() {
        console.log('打开文件夹');
        try {
            const handle = await window.showDirectoryPicker();
            root.children = (await processHandle(handle)).children;
            dir_name.value = handle.name;
        } catch (err: any) {
            console.error(err);
            // 用户取消选择
            if (err.name === 'AbortError') {
                console.log('用户取消了选择');
            }
        } 
    }

    async function processHandle(handle: any) {
        if (handle.kind === 'file') {
            return handle;
        }

        handle.children = [];
        const iter = handle.entries();
        for await (const item of iter) {
            handle.children.push(await processHandle(item[1]));
        }
        return handle;
    }

    async function handleNodeClick(handle: any) {
        console.log(handle);
        if (handle.kind === 'directory') return;
        if (handle.kind === 'sample') {
            EventBus.emit(CPP_CODE_UPDATE, handle);
            return;
        }

        const file = await handle.getFile();
        const reader = new FileReader();

        reader.onload = function(evt) {
            // console.log(evt.target?.result);

            EventBus.emit(CPP_CODE_UPDATE, {
                name: file.name,
                code: evt.target?.result as string
            })
        }

        reader.readAsText(file, 'utf-8');
    }
</script>

<style scoped>
    .side-wrapper {
        color: rgba(255, 255, 255, .5);
        user-select: none;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .dir-name {
        font-size: 18px;
        padding: 0.2em;
        background-color: #191a21;
        color: rgba(255, 255, 255, .5);
        text-indent: .5em;
        user-select: none;
    }

    :global(.el-tree) {
        margin-top: 4px;
        background: #21222c !important;
        color: rgba(255, 255, 255, .8) !important;
        font-size: 16px !important;
    }
    :global(.el-tree-node__content:hover) {
        background-color: #3e404a !important;
    }
    :global(.el-tree-node__content) {
        box-sizing: border-box !important;
        height: 1.8em !important;
    }
    :global(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
        background-color: #3e404a !important;
    }

    .tree-wrapper {
        flex-grow: 1;
        height: calc(100% - 58px);
        min-height: 362px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .tree-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .tree-wrapper::-webkit-scrollbar-thumb {
        background: rgb(55, 57, 64);
        border-radius: 4px;
    }

    .btns {
        padding: 14px 0;
        display: flex;
        height: 58px;
        justify-content: space-evenly;
        flex-grow: 0;
    }

    .btns button {
        width: 40%;
        border: none;
        outline: none;
        cursor: pointer;
        color: rgba(255, 255, 255, .5);
        background-color: #2f3037;
        box-shadow: 0 0 4px rgba(255, 255, 255, .2);
        padding: 6px 8px;
        font-size: 14px;
        border-radius: 4px;
    }

    .btns button:hover {
        background-color: transparent;
        transition: all .2s ease;
    }
</style>